<template>
  <div class="index">
    <devTool/>
    <div class="carousel-wrap">
      <template v-for="item in resourceList">
        <video
            @ended="changeMedia(1000)"
            :src="item.url"
            controls
            v-if="item.type==='video'"
            :key="item.index"
            :ref="'resource' + item.num"
            v-show="indexPlay === item.num"
        />
        <img
            :src="item.url"
            alt=""
            v-else
            :key="item.index"
            v-show="indexPlay === item.num"
            :ref="'resource' + item.num"
        />
      </template>
    </div>
  </div>
</template>

<script>

export default {
  data(){
    return{
      src: "",
      socketClient: null,
      isVideo: true,
      resourceList:platformConfig.toumingping55MediaList ,
      indexPlay: 0,
    }
  },
  mounted() {
    this.initMedia()
  },

  methods: {
    initMedia() {
      for(let i of this.resourceList){
        if(i.type==='img'){
          this.$set(i,'url',`local-video://dangjian/${i.num+1}.jpg`)
        }else{
          this.$set(i,'url',`local-video://dangjian/${i.num+1}.mp4`)
        }
      }
      this.isVideo =false;
      this.src = this.resourceList[0].src;
      if(this.isVideo){
        this.$refs["resource" + this.indexPlay][0].play();
      }else {
        this.changeMedia(4000);
      }
    },
    changeMedia(time) {
      setTimeout(() => {
        this.indexPlay++;
        if (this.indexPlay === this.resourceList.length) {
          this.indexPlay = 0;
        }
        let src = this.resourceList[this.indexPlay];
        this.isVideo = src.type==='video';
        if (this.isVideo) {
          this.$refs["resource" + this.indexPlay][0].play();
        } else {
          this.changeMedia(8000);
        }
      }, time);
    },
  },
}
</script>

<style scoped lang="scss">
.carousel-wrap {
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  video {
    object-fit: fill;
    width: 1920px;
    height: 1080px;
  }
  img{
    width: 1920px;
    height: 1080px;
  }
}

.index {
  height: 1080px;
  position: relative;
  width: 1920px;
}

</style>